<template>
  <div class="w-nav-height w-content-box">
    <div class="web-site-navigation">
      <a-collapse v-model="sectionValues">
        <a-collapse-panel v-for="section in dataArr" :key="section._id" :header="section._id">
          <a-tag
            v-for="item in section.arr"
            :key="item._id"
            color="pink"
            type="border"
            class="w-pointer w-tag"
            @click.native="itemClick(item)"
          >
            {{ item.title }}
          </a-tag>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script>
import { Api } from '@/config/api'
export default {
  layout: 'web',
  name: 'WebSiteNavigation',
  fetch ({ store }) {
    store.commit('app/SET_NAV_INDEX', '/web/site-navigation')
  },
  async asyncData ({ app }) {
    const { $wAxios } = app
    const data = await $wAxios.$get(Api.siteNavigation.curd)
    return { dataArr: data }
  },
  data () {
    return {
      sectionValues: []
    }
  },
  mounted () {
    this.sectionValues = this.dataArr.map(section => section._id)
  },
  methods: {
    itemClick (item) {
      window.open(item.url)
    }
  },
  head () {
    return {
      title: '网站导航'
    }
  }
}
</script>

<style scoped lang="less">
.web-site-navigation {
  padding: 20px 0;
  .w-tag {
    margin: 4px;
  }
}
</style>
<style lang="less">
.web-site-navigation {
  .ant-collapse-content-box {
    padding: 12px;
  }
}
</style>
